<!DOCTYPE html>
<html>
  <header>
    <meta content="text/html; charset=utf-8" http-equiv="content-type"></meta>
    <style>
      *{padding:0px; margin:0px;font-size: 12px;}
      html{width: 100%;height: 100%;}
      body{display: flex; flex-direction: column; width: 100%;height: 100%;}
    </style>
  </header>
  <body>
    <p>
      参考字体：
      <input id="edt_from_font" value="normal 56px Sans Serif"/>
      颜色：
      <input id="edt_from_color" style="width:50px" value="#FF0000"/>
    </p>
    <p>
      渲染字体：
      <input id="edt_to_font" value="normal 56px Simsun"/>
      颜色：
      <input id="edt_to_color" style="width:50px" value="#0000FF"/>
    </p>
    <p>
      <button id="btn_switch_font" >切换‘参考字体’与‘渲染字体’</button>
    </p>
    <p>
      ref_size<input id="ref_size" style="width: 50px;" type="number" value="2000"/>
      draw_size<input id="draw_size" style="width: 50px;" type="number" value="2000"/>
    </p>
    <p>
      padding
      <input id="padding_top" style="width: 50px;" type="number" value="20"/>
      <input id="padding_right" style="width: 50px;" type="number" value="20"/>
      <input id="padding_bottom" style="width: 50px;" type="number" value="20"/>
      <input id="padding_left" style="width: 50px;" type="number" value="20"/>
    </p>
    <p>
      line_space<input id="line_space" style="width: 50px;" type="number" value="2"/>
      letter_space<input id="letter_space" style="width: 50px;" type="number" value="5"/>
    </p>
    <p>文本内容(参考字体)：</p>
    <div style="display: flex;">
      <textarea id="edt_sample_text" style="word-wrap:normal;white-space:nowrap; overflow-x:scroll;"></textarea>
      <div> 
        <p>做了什么：</p>
        <p>&nbsp&nbsp&nbsp&nbsp通过 “参考字体” 计算出每个字符的“参考矩形”。</p>
        <p>&nbsp&nbsp&nbsp&nbsp再将 “渲染字体” 将字符绘制到各自“参考矩形”中。</p>
        <p>目标：</p>
        <p>&nbsp&nbsp&nbsp&nbsp下方的“参考文本”呈现应该是正常的</p>
        <p>&nbsp&nbsp&nbsp&nbsp无论“渲染字体”的字号、粗细如何，字符必须在“参考矩形”内。以此保证各平台的呈现位置的一致性。</p>
        <p>问题：</p>
        <p>&nbsp&nbsp&nbsp&nbsp字体相差愈大，渲染字体变形将愈严重。</p>
        <p>&nbsp&nbsp&nbsp&nbsp无法直接直接应用到各平台文本编辑框中，只能将编辑文本与呈现文本分离。</p>
      </div>
    </div>
    <p>
      <input id="checkbox_show_r" checked="checked" type="checkbox">显示参考文本</input>
      <input id="checkbox_show_b" checked="checked" type="checkbox">显示渲染文本</input>
      <input id="checkbox_show_f" checked="checked" type="checkbox">显示框线</input>
      ,画布缩放：<input id="edt_scale" type="number" value="100"/>
    </p>
    <div style="flex:1;overflow: scroll;position: relative;background-color: gray;">
      <canvas id="canvas_b" width="2000" height="2000" style="background-color: white;position:absolute;left:0px;right:0px;width: 2000px; height: 2000px;"></canvas>
    </div>
    <canvas id="canvas_r" width="2000" height="2000" style="display: none; background-color: blue;width: 2000px; height: 2000px;"></canvas>
  </body>
  <script src="texter.js"></script>
  <script src="index.js"></script>
</html>